<div>
    <h1 mat-dialog-title style="display:inline-block; cursor:move;" mat-dialog-draggable>{{'chart.config-lines' | translate}}</h1>
    <mat-icon (click)="onNoClick()" style="float:right;margin-right:-10px;margin-top:-10px;cursor:pointer;color:gray;">clear</mat-icon>
    <div mat-dialog-content>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>{{'chart.config-line-name' | translate}}</span>
            <input [(ngModel)]="data.name" type="text" style="width:300px" [disabled]="true">
        </div>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>{{'chart.config-line-label' | translate}}</span>
            <input [(ngModel)]="data.label" type="text" style="width:300px">
        </div>
        <div style="display: block;">
            <div class="my-form-field slider-field color-field">
                <span>{{'chart.config-line-color' | translate}}</span>
                <input [(colorPicker)]="data.color" [cpAlphaChannel]="'always'" class="input-color" [style.background]="data.color" [cpPresetColors]="defaultColor" [cpOKButton]="true"
                    [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'" [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'"
                    style="padding: 8px 0 0 0; width: 88px" [cpPosition]="'right'" />
            </div>
            <div class="my-form-field slider-field color-field" style="padding-left: 10px;">
                <span>{{'chart.config-line-fill' | translate}}</span>
                <input [(colorPicker)]="data.fill" [cpAlphaChannel]="'always'" class="input-color" [style.background]="data.fill" [cpPresetColors]="defaultColor" [cpOKButton]="true"
                    [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'" [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'"
                    style="padding: 8px 0 0 0; width: 88px" [cpPosition]="'right'" />
            </div>
        </div>
        <div class="my-form-field" style="display: block;height: 10px;">
        </div>
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" [mat-dialog-close]="data" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
    </div>
</div>